/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  StatusBar,
} from 'react-native';

import { Button, ThemeProvider } from 'react-native-elements';
import { Avatar, Badge } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import { CheckBox } from 'react-native-elements';
import { Divider } from 'react-native-elements';
import { ActivityIndicator } from 'react-native';
import { Image } from 'react-native-elements';
import { Input } from 'react-native-elements';
import { PricingCard } from 'react-native-elements';
import { AirbnbRating } from 'react-native-elements';
import { SocialIcon } from 'react-native-elements';
import { Tooltip, Text } from 'react-native-elements';

import { Colors } from 'react-native/Libraries/NewAppScreen';

import { getData, setData } from './testMoudle';

const AppComplex: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Text>{getData()}</Text>
          <Text>{setData('Complex')}</Text>
          <ThemeProvider>
            <Divider style={{ backgroundColor: 'blue' }} />
            <AirbnbRating />
            <AirbnbRating
              count={11}
              reviews={[
                'Terrible',
                'Bad',
                'Meh',
                'OK',
                'Good',
                'Hmm...',
                'Very Good',
                'Wow',
                'Amazing',
                'Unbelievable',
                'Jesus',
              ]}
              defaultRating={11}
              size={20}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Input placeholder="BASIC INPUT" />
            <Input
              placeholder="INPUT WITH ICON"
              leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
            />
            <Input
              placeholder="INPUT WITH CUSTOM ICON"
              leftIcon={<Icon name="user" size={24} color="black" />}
            />
            <Input
              placeholder="INPUT WITH ERROR MESSAGE"
              errorStyle={{ color: 'red' }}
              errorMessage="ENTER A VALID ERROR HERE"
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Button title="Solid Button" />
            <Button title="Outline button" type="outline" />
            <Button title="Clear button" type="clear" />
            <Button
              icon={<Icon name="arrow-right" size={15} color="white" />}
              title="Button with icon component"
            />
            <Button
              icon={{
                name: 'arrow-right',
                size: 15,
                color: 'white',
              }}
              title="Button with icon object"
            />
            <Button
              icon={<Icon name="arrow-right" size={15} color="white" />}
              iconRight
              title="Button with right icon"
            />
            <Button title="Loading button" loading />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Avatar
              rounded
              source={{
                uri: 'https://www.baidu.com/img/baidu_resultlogo@2.png',
              }}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Badge value="99+" status="error" />
            <Badge value={<Text>My Custom Badge</Text>} />
            <Badge status="success" />
            <Badge status="error" />
            <Badge status="primary" />
            <Badge status="warning" />
            <Divider style={{ backgroundColor: 'blue' }} />
            <View>
              <Avatar
                rounded
                source={{
                  uri: 'https://www.baidu.com/img/baidu_resultlogo@2.png',
                }}
                size="large"
              />

              <Badge
                status="success"
                containerStyle={{ position: 'absolute', top: -4, right: -4 }}
              />
            </View>
            <Divider style={{ backgroundColor: 'blue' }} />
            <Text>
              The aim of React Native Elements is to provide an all-in-one UI
              kit for creating apps in react native. There are many great ui
              components made by developers all around open source. React Native
              Elements takes the hassle of assembling these packages together by
              giving you a ready made kit with consistent api and look and feel.
            </Text>
            <Text>
              The aim of React Native Elements is to provide an all-in-one UI
              kit for creating apps in react native. There are many great ui
              components made by developers all around open source. React Native
              Elements takes the hassle of assembling these packages together by
              giving you a ready made kit with consistent api and look and feel.
            </Text>
            <Text>
              The aim of React Native Elements is to provide an all-in-one UI
              kit for creating apps in react native. There are many great ui
              components made by developers all around open source. React Native
              Elements takes the hassle of assembling these packages together by
              giving you a ready made kit with consistent api and look and feel.
            </Text>
            <Divider style={{ backgroundColor: 'blue' }} />
            <Tooltip popover={<Text>Info here</Text>}>
              <Text>Press me</Text>
            </Tooltip>
            <Tooltip popover={<Text>Info here</Text>}>
              <Text>Press me</Text>
            </Tooltip>
            <Tooltip popover={<Text>Info here</Text>}>
              <Text>Press me</Text>
            </Tooltip>
            <Divider style={{ backgroundColor: 'blue' }} />
            <SocialIcon type="twitter" />
            <SocialIcon raised={false} type="gitlab" />
            <SocialIcon light type="medium" />
            <SocialIcon light raised={false} type="medium" />
            <SocialIcon title="Sign In With Facebook" button type="facebook" />
            <SocialIcon title="Some Twitter Message" button type="twitter" />
            <SocialIcon button type="medium" />
            <SocialIcon button light type="instagram" />
            <Divider style={{ backgroundColor: 'blue' }} />
            <AirbnbRating />
            <AirbnbRating
              count={11}
              reviews={[
                'Terrible',
                'Bad',
                'Meh',
                'OK',
                'Good',
                'Hmm...',
                'Very Good',
                'Wow',
                'Amazing',
                'Unbelievable',
                'Jesus',
              ]}
              defaultRating={11}
              size={20}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Input placeholder="BASIC INPUT" />
            <Input
              placeholder="INPUT WITH ICON"
              leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
            />
            <Input
              placeholder="INPUT WITH CUSTOM ICON"
              leftIcon={<Icon name="user" size={24} color="black" />}
            />
            <Input
              placeholder="INPUT WITH ERROR MESSAGE"
              errorStyle={{ color: 'red' }}
              errorMessage="ENTER A VALID ERROR HERE"
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Button title="Solid Button" />
            <Button title="Outline button" type="outline" />
            <Button title="Clear button" type="clear" />
            <Button
              icon={<Icon name="arrow-right" size={15} color="white" />}
              title="Button with icon component"
            />
            <Button
              icon={{
                name: 'arrow-right',
                size: 15,
                color: 'white',
              }}
              title="Button with icon object"
            />
            <Button
              icon={<Icon name="arrow-right" size={15} color="white" />}
              iconRight
              title="Button with right icon"
            />
            <Button title="Loading button" loading />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Avatar
              rounded
              source={{
                uri: 'https://www.baidu.com/img/baidu_resultlogo@2.png',
              }}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Badge value="99+" status="error" />
            <Badge value={<Text>My Custom Badge</Text>} />
            <Badge status="success" />
            <Badge status="error" />
            <Badge status="primary" />
            <Badge status="warning" />
            <Divider style={{ backgroundColor: 'blue' }} />
            <View>
              <Avatar
                rounded
                source={{
                  uri: 'https://www.baidu.com/img/baidu_resultlogo@2.png',
                }}
                size="large"
              />

              <Badge
                status="success"
                containerStyle={{ position: 'absolute', top: -4, right: -4 }}
              />
            </View>
            <Divider style={{ backgroundColor: 'blue' }} />
            <Divider style={{ backgroundColor: 'blue' }} />
            <AirbnbRating />
            <AirbnbRating
              count={11}
              reviews={[
                'Terrible',
                'Bad',
                'Meh',
                'OK',
                'Good',
                'Hmm...',
                'Very Good',
                'Wow',
                'Amazing',
                'Unbelievable',
                'Jesus',
              ]}
              defaultRating={11}
              size={20}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <PricingCard
              color="#4f9deb"
              title="Free"
              price="$0"
              info={['1 User', 'Basic Support', 'All Core Features']}
              button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Input placeholder="BASIC INPUT" />
            <Input
              placeholder="INPUT WITH ICON"
              leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
            />
            <Input
              placeholder="INPUT WITH CUSTOM ICON"
              leftIcon={<Icon name="user" size={24} color="black" />}
            />
            <Input
              placeholder="INPUT WITH ERROR MESSAGE"
              errorStyle={{ color: 'red' }}
              errorMessage="ENTER A VALID ERROR HERE"
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Button title="Solid Button" />
            <Button title="Outline button" type="outline" />
            <Button title="Clear button" type="clear" />
            <Button
              icon={<Icon name="arrow-right" size={15} color="white" />}
              title="Button with icon component"
            />
            <Button
              icon={{
                name: 'arrow-right',
                size: 15,
                color: 'white',
              }}
              title="Button with icon object"
            />
            <Button
              icon={<Icon name="arrow-right" size={15} color="white" />}
              iconRight
              title="Button with right icon"
            />
            <Button title="Loading button" loading />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Avatar
              rounded
              source={{
                uri: 'https://www.baidu.com/img/baidu_resultlogo@2.png',
              }}
            />
            <Divider style={{ backgroundColor: 'blue' }} />
            <Badge value="99+" status="error" />
            <Badge value={<Text>My Custom Badge</Text>} />
            <Badge status="success" />
            <Badge status="error" />
            <Badge status="primary" />
            <Badge status="warning" />
            <Divider style={{ backgroundColor: 'blue' }} />
            <View>
              <Avatar
                rounded
                source={{
                  uri: 'https://www.baidu.com/img/baidu_resultlogo@2.png',
                }}
                size="large"
              />

              <Badge
                status="success"
                containerStyle={{ position: 'absolute', top: -4, right: -4 }}
              />
            </View>
          </ThemeProvider>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default AppComplex;
